<template>
  <div class="body">
        <el-drawer
        title=""
        :visible.sync="drawer"
        :direction="direction"
        size="70%"
        >
        <div class="menuList">
            <h3><router-link to="/Home">Home Page</router-link></h3>
            <h3><router-link to="/quantitative">AI quantitative trading</router-link></h3>
            <h3><router-link to="/Customer">Customer case</router-link></h3>
            <h3><router-link to="/expectations">Expectations</router-link></h3>
            <h3><router-link to="/About">About us</router-link></h3>
            <h3><router-link to="/trading">Contact Us</router-link></h3>
        </div>
        
        </el-drawer>
    <div class="container">
      <div class="sm-nav-item">
        <div class="sm-nav-item-body">
          <div>
            <img src="@/static/more.png" alt="" class="moreIcon" @click="drawer = true" />
          </div>
          <div>
            <img src="@/static/phoneLogo.png" alt="" class="phoneLogo" />
          </div>
        </div>
      </div>

      <div class="lg-nav-item">
        <div>
          <img src="@/static/pcLogo.png" alt="" class="topBar-logo" />
        </div>
        <nav class="nav-item">
          <router-link to="/Home" class="navItem">Home Page</router-link>
          <router-link to="/quantitative" class="navItem"
            >AI quantitative trading</router-link
          >
          <router-link to="/Customer" class="navItem"
            >Customer case</router-link
          >
          <router-link to="/expectations" class="navItem">Expectations</router-link>
          <router-link to="/About" class="navItem">About us</router-link>
          <router-link
            to="/trading"
            class="navItem lastItem"
            style="margin-right: 0px"
            >Contact Us</router-link
          >
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        drawer: false,
        direction: 'ltr',
    };
  },
  methods: {
    }
};
</script>

<style lang="scss" scoped>
:root {
  --small-screen: 768px; /* 定义变量 */
}
.menuList{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sm-nav-item {
  display: flex;
  align-items: center;
  margin: 20px 0;
  .sm-nav-item-body {
    display: flex;
    align-items: center;
    width: 80%;
    .moreIcon {
      width: 26px;
      height: 22px;
    }
    .phoneLogo {
      width: 193px;
      height: 32px;
      margin-left: 50px;
    }
  }
}
a {
  text-decoration: none;
  color: black;
  &.router-link-exact-active {
    color: #42b983;
  }
}
.nav-item {
  width: 80%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .navItem {
  }
  .lastItem {
    text-align: center;
    width: 167px;
    line-height: 61px;
    height: 61px;
    border-radius: 4px;
    background-color: #c30d23;
    color: #fff;
  }
}
.lg-nav-item{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.body {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topBar-logo {
  width: 100px;
  height: 60px;
}
/* 使用媒体查询根据屏幕宽度切换元素的显示和隐藏 */
@media screen and (max-width: 1200px) {
    .nav-item{
        font-size: 12px !important;
    }
}
@media screen and (max-width: 1200px) {
    .nav-item{
        font-size: 8px !important;
    }
}
@media screen and (max-width: 768px) {
  .lg-nav-item {
    display: none;
  }

  .sm-nav-item {
    display: flex;
  }
}

@media screen and (min-width: 768px) {
  .lg-nav-item {
    display: flex;
  }

  .sm-nav-item {
    display: none;
  }
}

</style>